<!-- eslint-disable vue/multi-word-component-names -->
<script setup>
//import show from './component/show.vue'
//import feedback from './component/feedback.vue'
/*import { onMounted } from 'vue';
import {GoodsStore} from '@/stores/GoodsStore'

const goodsStore=GoodsStore();
const {goodslist,getgoods}=goodsStore;
onMounted(async () => {
  await getgoods(); // 等待数据加载完成
  console.log('goodslist:', goodslist.value); // 确保数据已加载完成
  console.log('是否有商品：', goodslist.value && goodslist.value.length > 0); // 判断是否有商品数据
});*/
import Product from './component/Product.vue';
import { ref, onMounted } from 'vue';

const goodslist = ref([]); // 本地状态存储商品数据

// 定义获取商品数据的函数
async function getgoods() {
  const url = 'http://localhost:8080/good/list';
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error('获取商品数据失败');
    }
    const data = await response.json();
    goodslist.value = data; // 存储获取到的商品数据
    console.log('goodslist:', goodslist.value); // 数据加载完成后打印
  } catch (error) {
    console.error(error.message);
  }
}

// 在组件挂载时获取数据
onMounted(() => {
  getgoods();
});


</script>
<!--<template>
  <div v-if="goodslist && goodslist.length > 0">
    <template v-if="goodslist[0].stock >0 ">
      <show :goodslist="goodslist[0]" /> 

   </template>
    <template v-else>
      <feedback :goods="goodslist[0]" /> 
    </template>
  </div>
  <div v-else >
    <div  style="height: 100vh;">
    <p>正在加载数据...</p>
    <p>请稍候...</p>
    </div>
  </div>
</template>-->





<template>
 <product/>
</template>
